<template>
  <div class="login_box">
    <vue-particles
      color="#fff"
      :particleOpacity="0.7"
      :particlesNumber="60"
      shapeType="circle"
      :particleSize="4"
      linesColor="#fff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="login_box_bg"
    ></vue-particles>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-position="left"
      label-width="0px"
      class="demo-ruleForm login-container"
    >
      <div class="login_title">系统登录</div>
      <el-form-item prop="account">
        <el-input
          type="text"
          v-model="ruleForm.account"
          auto-complete="off"
          placeholder="账号"
          prefix-icon="courtfont icon-user-create"
        ></el-input>
      </el-form-item>
      <el-form-item prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm.checkPass"
          auto-complete="off"
          placeholder="密码"
          prefix-icon="courtfont icon-zhucedenglumima"
        ></el-input>
      </el-form-item>
      <el-form-item prop="checkCode">
        <el-input
          type="text"
          v-model="ruleForm.checkCode"
          class="codeInput"
          placeholder="验证码"
          prefix-icon="courtfont icon-zhucedenglumima"
        ></el-input>
        <canvas width="80" height="40" @click="handleCreateCode" id="code"/>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button
          type="primary"
          style="width:100%;"
          @click.native.prevent="handleSubmit"
          :loading="logining"
        >登录</el-button>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button
          type="primary"
          style="width:100%;"
          @click.native.prevent="handleReister"
          :loading="logining"
        >注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      logining: false,
      ruleForm: {
        account: "admin",
        checkPass: "admin",
        checkCode: ""
      },
      rules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        checkPass: [{ required: true, message: "请输入密码", trigger: "blur" }],
        checkCode: [
          { required: true, message: "请输入验证码", trigger: "blur" }
        ]
      },
      checked: true
    };
  },
  methods: {
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    createCode() {
      const canvas = document.getElementById("code");
      const ctx = canvas.getContext("2d");
      const chars = [
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "j",
        "k",
        "l",
        "m",
        "n",
        "p",
        "q",
        "r",
        "s",
        "t",
        "u",
        "v",
        "w",
        "x",
        "y",
        "z",
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      ];
      let code = "";
      ctx.clearRect(0, 0, 80, 39);
      for (let i = 0; i < 4; i++) {
        const char = chars[this.randomNum(0, 57)];
        code += char;
        ctx.font = this.randomNum(20, 25) + "px SimHei"; //设置字体随机大小
        ctx.fillStyle = "#D3D7F7";
        ctx.textBaseline = "middle";
        ctx.shadowOffsetX = this.randomNum(-3, 3);
        ctx.shadowOffsetY = this.randomNum(-3, 3);
        ctx.shadowBlur = this.randomNum(-3, 3);
        ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
        let x = (80 / 5) * (i + 1);
        let y = 39 / 2;
        let deg = this.randomNum(-25, 25);
        /**设置旋转角度和坐标原点**/
        ctx.translate(x, y);
        ctx.rotate((deg * Math.PI) / 180);
        ctx.fillText(char, 0, 0);
        /**恢复旋转角度和坐标原点**/
        ctx.rotate((-deg * Math.PI) / 180);
        ctx.translate(-x, -y);
      }
      this.code = code;
    },
    handleCreateCode() {
      this.createCode();
    },
    handleSubmit(ev) {
      var _this = this;
      _this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let value = _this.ruleForm.checkCode;
          if (
            value.length >= 4 &&
            _this.code.toUpperCase() !== value.toUpperCase()
          ) {
            _this.$message({
              message: "验证码错误",
              type: "error"
            });
            _this.createCode();
            return;
          }
          _this.logining = true;
          this.$http
            .post("/users/login", {
              username: this.ruleForm.account,
              password: this.ruleForm.checkPass
            })
            .then(res => {
              _this.logining = false;
              if (res.data.code == 1) {
                _this.$message({
                  message: res.data.message,
                  type: "error"
                });
                return;
              } else {
                _this.loading = false;
                _this.$router.push({ path: "/" });
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleReister(e){
      var _this = this;
      _this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let value = _this.ruleForm.checkCode;
          if (
            value.length >= 4 &&
            _this.code.toUpperCase() !== value.toUpperCase()
          ) {
            _this.$message({
              message: "验证码错误",
              type: "error"
            });
            _this.createCode();
            return;
          }
          _this.logining = true;
          this.$http
            .post("/users/register", {
              username: this.ruleForm.account,
              password: this.ruleForm.checkPass
            })
            .then(res => {
              console.log(res)
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  mounted() {
    this.createCode();
  }
};
</script>

<style lang="scss" scoped>
.login_box {
  width: 100%;
  height: 100%;
  background: url("../../assets/images/background.jpg");
  background-size: 100% 100%;
  transition: all 0.5s;
  overflow: hidden;
  position: relative;
  .login_box_bg {
    width: 100%;
    height: 100%;
  }
  .login_title {
    margin-bottom: 22px;
    color: #fff;
    font-size: 1.5em;
  }
}
.login-container {
  position: absolute;
  margin: auto;
  width: 400px;
  height: 450px;
  padding: 90px 65px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  backface-visibility: hidden;
  background: linear-gradient(
    230deg,
    rgba(53, 57, 74, 0) 0%,
    rgb(0, 0, 0) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(53, 57, 74, 0)', endColorstr='rgb(0, 0, 0)',GradientType=1 );
  box-shadow: -15px 15px 15px rgba(0, 0, 0, 0.4);
  transition: all 1s;
  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #ffffff;
  }

  .codeInput {
    width: 65%;
  }
  canvas {
    position: absolute;
    right: 0;
    cursor: pointer;
  }
}
</style>